<template>
    <div class="create-project-layout">
        <header-view>
            <img src="../../../assets/image/back.png" alt="" class="icon" @click="goBack" v-if="!isEdit">
            <img src="../../../assets/image/keep.png" alt="" class="icon" @click="onSave" v-if="isEdit">
            <div class="title">
                <div class="circle">{{optionForm.name.substring(0,1)}}</div>
                <div class="title-text">{{optionForm.name.replace('.' + optionForm.suffix, '')}}</div>
            </div>
            <img src="../../../assets/image/share-white.png" alt="" class="icon" @click.stop="onShare">
        </header-view>
        <div class="content editor" ref="content">
<!--            <div class="form-title">-->
<!--                <div class="edit-title">-->
<!--                    <img src="../../../assets/image/line.png" alt="" class="line">-->
<!--                    <input type="text" class="title" v-model="name" maxlength="12" placeholder="输入标题" ref="title">-->
<!--                    <span class="num font-large24">{{name.length}}/12</span>-->
<!--                </div>-->
<!--            </div>-->
            <div class="rich-text-test">
              <tinymce
                  ref="tinymce"
                  :init-height="tinyHeight"
                  :readonly="false"
                  :selected-file="optionForm"
                  @onClick="onClick"
              />
            </div>
<!--            <textarea name="" id="textarea" placeholder="输入正文" v-model="content"></textarea>-->
        </div>
        <div class="drop-layout" v-if="isShowShareUser">
            <dialog-share-user :data="optionForm"/>
        </div>
    </div>
</template>

<script>
    import HeaderView from '../../common/HeaderView'
    import DialogShareUser from '../../common/DialogShareUser';
    import tinymce from '../../common/tinymce'
    import {updateHtml} from "@/api/file";

    export default {
        name: 'CreateFile',
        components: { HeaderView, DialogShareUser, tinymce },
        data() {
            return {
                isEdit: true,
                name: '',
                file: JSON.parse(sessionStorage.info),
                content: '123',
                optionForm: this.$route.params.selectedFile,
                isShowShareUser: false,
                tinyHeight:200,
            }
        },
        mounted() {
            const content = this.$refs.content.getBoundingClientRect();
            this.tinyHeight = content.height;
            setTimeout(()=>{
                let dom = document.getElementsByClassName('tox-editor-header')[0];
                if (dom) {
                    dom.style.position = "fixed";
                    dom.style.width = '100%';
                    dom.style.height = '39px';
                    dom.style.left = content.left + "0";
                    dom.style.top = content.top + "px";
                    this.$refs.content.style.paddingTop =  '39px';
                }
            },100);
          // console.log(this.optionForm)
            document.addEventListener('click', () => {
                if(this.isShowShareUser)
                    this.isShowShareUser = false;
            })
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            onSave() {
                this.updateHtml();
                this.isEdit = false;
            },
            onShare() {
                // if(this.name === ''){
                //     this.$toast('请添加标题')
                //     return
                // }
                this.onSave();
                this.isShowShareUser = true;
            },
            onClick(){

            },
            updateHtml() {
              const fileid = this.optionForm.id;
              const html = this.$refs.tinymce.myValue;
              updateHtml(fileid, html)
                  .then(result => {
                    console.log(result)
                  })
                  .catch(err => {
                    console.log(err)
                  })
            },
        }
    }
</script>

<style scoped>
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 135px;
        bottom: 0;
        overflow-y: auto;
    }
    .form-title {
        padding-top: 54px;
        border-bottom: 1px solid #C8C8C8;
        padding-bottom: 31px;
        margin-bottom: 10px;
    }
    .edit-title {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
        justify-content: space-between;
    }
    .line {
        height: 32px;
        margin-right: 26px;
    }
    .edit-title .title {
        flex: 1;
    }
    .num {
        opacity: 0.4;
        color: #181818;
    }
    input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #181818;
        font-size: 26px;
    }
    #textarea {
        padding-top: 40px;
        opacity: 0.8;
        width: 100%;
        border: none;
        outline: none;
    }
    .drop-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        z-index: 999;
    }
</style>
